{extend name="base" /}
{block name="css"}
<style>
    .tdImg {
        width: 85px;
        height: 85px;
        cursor: zoom-in;
        border-radius: 10%;
        border: 2px solid #dddddd;
        border: none;
    }
</style>
{/block}
{block name="body"}
<div class="layui-card">
<script type="text/html" id="toolbar">
 <div class="layui-card-header">
        <div class="layui-btn-group">
            <a href="{:url('banner/add')}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px"><i class="fa fa-plus-circle"></i> 添加图片</a>
        </div>
    </div>
        </script>
        <table id="tableTrack" lay-filter="tableTrack"></table>
      <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a href="{:url('banner/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px"><i class="layui-icon layui-icon-edit"></i>修改</a>
        <a href="{:url('banner/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除ID:{{d.id}}"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
        <!-- 权限列 -->
        <script type="text/html" id="status">
            {{# if(d.status == '0'){ }}
            <a class="layui-btn layui-btn-primary layui-btn-sm">失效</a>
            {{# }else if(d.status == '1'){ }}
            <a class="layui-btn layui-btn-sm">正常</a>
            {{# } }}
        </script>
</div>
{/block}
{block name="js"}
<script>
    layui.use(function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var upload = layui.upload;

        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableTrack',
            toolbar: '#toolbar',  //开启头部工具栏，并为其绑定左侧模板
            url: "{:url('banner/index_json')}",  // 请求数据路由地址
             page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                 //,curr: 5 //设定初始在第 5 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
            ,prev: '<em>上一页</em>'
            ,next: '<em>下一页</em>'
            } ,
            lineStyle: 'height: 100px;',//图片高度
            even:true,
            cols: [[
            
               {
                type:'numbers',
                title:'#', width: 60
               },{
                    field: 'image', 
                    align: 'center', 
                    templet: function (d) {
                        var url = d.image;
                        return '<img src="' + url + '" class="tdImg" tb-img/>';
                    }, 
                    title: '图片', 
                    width: 150, 
                    unresize: true
                }, {
                    field: 'desc', 
                    title: '描述', 
                    align: 'center', 
                    width: 300
                }, {
                    field: 'url', 
                    title: '跳转链接', 
                    align: 'center', 
                    width: 120
                }, {
                    field: 'weigh', 
                    title: '排序', 
                    align: 'center', 
                    width: 80,
                    sort : true
                }, {
                    field: 'create_time', 
                    title: '添加时间', 
                    align: 'center', 
                    width: 160
                }, {
                    field: 'status', 
                    title: '状态', 
                    align: 'center', 
                    width: 80,
                    templet:function (d) {
                        return  d.status ? ' <i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>' : '<i class="layui-icon layui-icon-close-fill" style="font-size: 25px; color: #FF5722;"></i>';
                    }
                }, {
                    align: 'center', 
                    toolbar: '#tableTBTrack', 
                    title: '操作', 
                    minWidth: 200
                }
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });
        
        // 点击图片放大
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            layer.photos({photos: {data: [{src: $(this).attr('src')}]}, shade: .1, closeBtn: true});
        });
        
    });
</script>
{/block}